<template>
  <div class="container">
    <navbar class="de-navbar" :vaniconL="true" :noRight="true" :noLeft="false" :vaniconR="true" iconNameL="arrow-left" iconNameR="flag-o" @clickLeft="$router.go(-1)" >
      我要合作
    </navbar>

    <div style="height: 0.45rem"></div>

    <van-form @submit="onSubmit">
      <van-field
        v-model.number="form.offer"
        name="offer"
        label="报价"
        placeholder="请输入报价"
        :rules="[{ required: true, message: '请输入报价' }]"
      />
      <van-field
        readonly
        clickable
        name="cycle"
        :value="form.cycle"
        label="预计完成时间"
        placeholder="点击选择日期"
        @click="showCalendar = true"
      />
      <van-field
        v-model="form.content"
        name="content"
        rows="4"
        autosize
        label="留言"
        type="textarea"
        placeholder="请输入留言"
        :rules="[{ required: true, message: '请输入留言' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <van-calendar v-model="showCalendar" @confirm="onConfirm" />
  </div>
  
</template>

<script>
import { set_project_invited } from '@/api/AIPartTime'
import navbar from "@/components/navbar"

export default {
  components: {
    navbar
  },
  data() {
    return {
      projectId: this.$route.query.projectId,
      form: {},
      showCalendar: false
    }
  },
  methods: {
    // 提交
    onSubmit(values) {
      const { projectId } = this
      const { name: userName, id: userId } = JSON.parse(sessionStorage.getItem("userInfo"))
      const params = Object.assign({}, values, { projectId, userName, userId })
      set_project_invited(params).then(res => {
        if (res.data.status === 200) {
          this.$toast.success('提交成功')
          setTimeout(() => {
            this.$router.go(-1)
          }, 500)
        } else {
          this.$toast.fail(res.data.msg)
        }
      })
    },
    // 日期确认
    onConfirm(date) {
      this.form.cycle = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
      this.showCalendar = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.success {
  color: #67C23A;
}
.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;
  text-align: center;
  .de-navbar {
    width: 100%;
    height: 0.45rem;
    position: fixed;
    top: 0;
    z-index: 10;
    background: #4775d9;
    background-image: linear-gradient(211deg, #5d5cbf 0%, #4775d9 100%);
    color: #fff;
  }
  /deep/ .van-calendar__selected-day {
    background: #409EFF;
  }
  /deep/ .van-calendar__footer {
    .van-button--danger {
      background: #409EFF;
      border-color: #409EFF;
    }
  }
}
</style>